import { Radio, Upload, Card, Breadcrumb, Form, Button, Input, Space, Select, message } from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import { Link } from 'react-router-dom'
import './index.scss'

import ReactQuill from 'react-quill-new'
// 如果控制台警告 quill.snow.css.map 找不到，可以找到 quill.snow.css 文件，把末尾最后一行注释删除
import 'react-quill-new/dist/quill.snow.css'
import { useState, useEffect } from 'react'
import { createArticleAPI, getArticleById, updateArticleAPI } from '@/apis/article'
import { useChannels } from '@/hooks/useChannels'
import { useSearchParams } from 'react-router-dom'

const { Option } = Select

const Publish = () => {
  // 获取频道列表
  const { channelList } = useChannels()

  // 提交表单
  const onFinish = async (formValue) => {
    // console.log(formValue)
    // 校验封面类型 imageType 是否和实际的图片列表 imageList 数量是相等的
    if (imageList.length !== imageType) return message.warning('封面类型和图片数量不匹配')
    const { title, content, channel_id } = formValue
    // 1. 按照接口文档的格式处理收集到的表单数据
    const reqData = {
      title,
      content,
      cover: {
        type: imageType, // 封面模式
        // 这里的 url 处理逻辑只是在新增时候的逻辑
        // 编辑的时候需要做处理
        images: imageList.map((item) => {
          if (item.response) {
            return item.response.data.url
          } else {
            return item.url
          }
        }), // 图片列表
      },
      channel_id,
    }
    // 2. 调用接口提交
    // 处理调用不同的接口 新增 - 新增接口  编辑状态 - 更新接口  id
    if (articleId) {
      await updateArticleAPI({ ...reqData, id: articleId })
      message.success('文章更新成功')
    } else {
      await createArticleAPI(reqData)
      new Promise((resolve) => {
        setImageType(0)
        resolve()
      }).then(() => {
        form.resetFields()
        message.success('文章发布成功')
      })
    }
  }

  // 上传回调
  const [imageList, setImageList] = useState([])
  const onChange = (value) => {
    // console.log('正在上传中...', value)
    setImageList(value.fileList)
  }

  // 切换图片封面类型
  const [imageType, setImageType] = useState(0)
  const onTypeChange = (e) => {
    // console.log('切换了图片封面类型', e.target.value)
    setImageType(e.target.value)
    setImageList([])
  }

  // 回填数据
  const [searchParams] = useSearchParams()
  const articleId = searchParams.get('id')
  // console.log(articleId)
  // 获取实例
  const [form] = Form.useForm()
  useEffect(() => {
    async function getArticleDetail() {
      // 1. 通过 id 获取数据
      const res = await getArticleById(articleId)
      // 2. 调用实例方法 完成回填
      const data = res.data
      const { cover } = data
      form.setFieldsValue({ ...data, type: cover.type })
      // 为什么现在的写法无法回填封面？
      // 数据结构的问题  set 方法 -> { type: 3 }  { cover: { type: 3 } }

      // 回填图片列表
      setImageType(cover.type)
      // 显示图片({ url: url })
      setImageList(cover.images.map((url) => ({ url })))
    }
    articleId && getArticleDetail()
  }, [articleId, form])

  return (
    <div className="publish">
      <Card title={<Breadcrumb items={[{ title: <Link to={'/'}>首页</Link> }, { title: `${articleId ? '编辑' : '发布'}文章` }]} />}>
        <Form form={form} labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} initialValues={{ type: imageType }} onFinish={onFinish}>
          <Form.Item label="标题" name="title" validateTrigger={['onChange', 'onBlur']} rules={[{ required: true, message: '请输入文章标题' }]}>
            <Input placeholder="请输入文章标题" style={{ width: 400 }} />
          </Form.Item>
          <Form.Item label="频道" name="channel_id" rules={[{ required: true, message: '请选择文章频道' }]}>
            <Select placeholder="请选择文章频道" style={{ width: 400 }}>
              {/* value 属性用户选中之后会自动收集起来作为接口的提交字段 */}
              {channelList.map((item) => (
                <Option key={item.id} value={item.id}>
                  {item.name}
                </Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item label="封面">
            <Form.Item name="type">
              <Radio.Group onChange={onTypeChange}>
                <Radio value={1}>单图</Radio>
                <Radio value={3}>三图</Radio>
                <Radio value={0}>无图</Radio>
              </Radio.Group>
            </Form.Item>
            {/* 
              listType: 决定选择文件框的外观样式
              showUploadList: 控制显示上传列表
            */}
            {imageType > 0 && (
              <Upload fileList={imageList} listType="picture-card" showUploadList action={'http://geek.itheima.net/v1_0/upload'} name="image" onChange={onChange} maxCount={imageType} multiple={imageType > 1}>
                <div style={{ marginTop: 8 }}>
                  <PlusOutlined />
                </div>
              </Upload>
            )}
          </Form.Item>
          <Form.Item label="内容" name="content" rules={[{ required: true, message: '请输入文章内容' }]}>
            {/* 富文本编辑器 */}
            <ReactQuill className="publish-quill" theme="snow" placeholder="请输入文章内容" />
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 4 }}>
            <Space>
              <Button size="large" type="primary" htmlType="submit">
                发布文章
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}

export default Publish
